<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8"/>
    <title>设备</title>
    <meta name="description" content="overview & stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="static/css/bootstrap-responsive.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="static/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="static/css/ace.min.css"/>
    <link rel="stylesheet" href="static/css/ace-responsive.min.css"/>
    <link rel="stylesheet" href="static/css/ace-skins.min.css"/>
    <script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
    <!--提示框-->
    <script type="text/javascript" src="static/js/jquery.tips.js"></script>
    <!-- 日期框 -->
    <script type="text/javascript" src="static/js/bootstrap-datepicker.min.js"></script>
</head>

<script type="text/javascript">
    $(function () {
        top.hangge();
        //日期框
        $('.date-picker').datepicker({autoclose: true});
    });

    //保存
    function save() {
        var id = $("#id").val();
        if (id == "") {
            $("#id").tips({
                side: 3,
                msg: '请输入设备号',
                bg: '#AE81FF',
                time: 2
            });
            $("#id").focus();
            return false;
        }
        if (id.search(/[a-zA-Z0-9]{14,15}/) == -1) {
            $("#id").tips({
                side: 3,
                msg: '设备号不合法，请输入英文或数字组合的14-15位字符',
                bg: '#AE81FF',
                time: 2
            });
            $("#id").focus();
            return false;
        }
        if ($("#channelId").val() == "") {
            $("#channelId").tips({
                side: 3,
                msg: '请选择渠道',
                bg: '#AE81FF',
                time: 2
            });
            $("#channelId").focus();
            return false;
        }
        if ($("#modelId").val() == "") {
            $("#modelId").tips({
                side: 3,
                msg: '请选择型号',
                bg: '#AE81FF',
                time: 2
            });
            $("#modelId").focus();
            return false;
        }
        $.get("device/checkImeiExist",
            {"imei": id},
            function (data) {
                if (data.code == 200) {
                    $("#menuForm").submit();
                    $("#zhongxin").hide();
                    $("#zhongxin2").show();
                } else {
                    alert(data.msg);
                }
            });
    }

    //更改渠道时初始化型号
    function channelChange() {
        var channelCode = $("#channelId option:selected").attr("data-code");
        if (channelCode) {
            $.get("models/listByVender", {vender: channelCode}, function (data) {
                if (data.code == 200) {
                    $("#modelId").empty();
                    $("#modelId").append($("<option/>").text('请选择型号').attr("value", ''));
                    $.each(data.data, function (i, item) {
                        $("#modelId").append($("<option/>").text(item.model).attr("value", item.id));
                    });
                }
            });
        }
    }
</script>

<body>
<form action="device/add" name="menuForm" id="menuForm" method="post">
    <div id="zhongxin" class="zhongxin-cla">
        <table>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>设备号：</span>
                    <input type="text" name="id" id="id" placeholder="设备号" value=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>渠道名称：</span>
                    <select name="channelId" id="channelId" onchange="channelChange()" class="input_txt" title="渠道名称"
                            required="required">
                        <option value="">请选择设备渠道</option>
                        <c:forEach items="${channels}" var="channel">
                            <option value="${channel.id}" data-code="${channel.channelCode}">${channel.name}</option>
                        </c:forEach>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>型号名称：</span>
                    <select name="modelId" id="modelId" class="input_txt" title="型号名称" required="required">
                        <option value="">请选择型号</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red' style="float: left">*</font>
                    <span style="float: left">量产号码：</span>
                    <div style="float: left">
                        <label style="float:left;padding-left: 32px;">
                            <input name="ifHaveProductionBatch" type="radio" value="1">
                            <span class="lbl">是</span>
                        </label>
                        <label style="float:left;padding-left: 32px;">
                            <input name="ifHaveProductionBatch" type="radio" value="0" checked>
                            <span class="lbl">否</span>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: center; padding-top: 10px;">
                    <a class="btn btn-mini btn-primary" onclick="save();">保存</a>
                    <a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="zhongxin2" class="center" style="display:none">
        <br/><br/><br/><img src="static/images/jiazai.gif"/><br/>
        <h4 class="lighter block green"></h4>
    </div>
</form>
</body>
</html>